<template>
  <div>
    <h2>我是子组件</h2>
    <p>{{p.age}}</p>
    <p>{{p.demo.price}}</p>
    <button @click="changeAge">点击改变年龄</button>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    person:Object
  },
  data() {
    return {
        // 3. 可以使用拷贝，切断数据之间的联系
        // 浅拷贝 ---> 这个对象只有一层。。。
        // p:this.person
        // p:{...this.person},
        // 深拷贝 
        p:JSON.parse(JSON.stringify(this.person))
    }
  },
  methods:{
    changeAge(){
        // 1. 修改props中的person 实际上改的还是父组件的person对象
        // 单向数据流 ---> 不能直接修改props中的变量
        // this.person.age = 9 
        console.log(this.p)
        this.p.age = 99

        // 2. 可以在data中声明一个变量接收props
        // 但是父组件传递给子组件的是一个引用类型的数据.. 依然指向同一个地址

        // this.p.age = 9 
        this.p.demo.price = 88
    }
  },

}
</script>
<style scoped>
</style>